<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父子组件的数据传递</title>
  <script src="../static/vue.js"></script>
</head>
<body>
<div id="root">

  <counter :count="0" @change="handleChange"></counter>    <!--有: js表达式代表0 没有就是字符串  -->
  <counter :count="1" @change="handleChange"></counter>
  <div>{{total}}</div>
</div>

<script>
  //父组件向子组件传递数据，通过属性形式传递数据
  //局部组件
  var counter = {
    props: ['count'],//子组件接受父组件传递的内容
    data: function () {
      return {
        number: this.count

      }
    },
    template: '<div @click="handleClick">{{number}}</div>',
    methods: {
      handleClick: function () {
        this.number++;
        this.$emit('change',1)
      }
    }
  }

  var vm = new Vue({
    el: '#root',
    data:{
      total:5
    },
    components: {
      counter: counter,//注册局部组件
    },
    methods:{
      handleChange:function (step) {
        this.total+=step;
      }
    }

  })
</script>
</body>
</html>
